<template>
  <el-container>
    <el-main>
      <el-descriptions title="阻断路段详情" direction="horizontal" :column="2" border>
        <el-descriptions-item label="阻断路段id">{{content.blockedSegId}}</el-descriptions-item>
        <el-descriptions-item label="路段id">{{content.segId}}</el-descriptions-item>
        <el-descriptions-item label="开始日期" :span="2">{{content.beginDate}}</el-descriptions-item>
        <el-descriptions-item label="结束日期" :span="2">{{content.endDate}}</el-descriptions-item>
        <el-descriptions-item label="阻断方向" :span="2">{{content.direction}}</el-descriptions-item>
        <el-descriptions-item label="阻断原因" :span="2">{{content.reason}}</el-descriptions-item>
      </el-descriptions>
    </el-main>
  </el-container>

</template>

<script>
import axios from "axios";
import {ElMessage} from "element-plus";

export default {
  name: "blockedRoadsChild",
  props:{
    blockedSegId: Number
  },
  data(){
    return{
      content:{
        blockedSegId:"",
        segId:"",
        beginDate:"",
        endDate:"",
        direction:"",
        reason:""
      }
    }
  },
  mounted() {
    axios({
      method: 'post',
      url: '/api/road/selectBlockedSegs',
      params:{
        id:this.blockedSegId
      }
    })
        .then((res)=>{

          if(res.data.code==="1"){//返回成功
            this.content=res.data.data.blockedSegs
          }else{//返回失败
            // alert("查询失败")
            ElMessage.error('查询失败')
            this.$emit('wrong')
          }
        });
  }
}
</script>

<style scoped>
.el-container{
  height: 550px!important;
  width: 100%;
}
</style>